<template>
  <div ref="boxRef" class="main">
    <dv-loading v-if="isShowLoading">Loading...</dv-loading>
    <div v-else class="layout-container">
      <dv-border-box-10>
        <div style="height: 100%">
          <Header></Header>
          <div class="box_dish">
            <div class="box_dish_left">
              <div class="box_dish_left_top">
                <Line
                  :height="heightSon"
                  :width="widthSon"
                  v-for="(item, index) in cardData"
                  :key="item + index"
                >
                  <!-- 具名插槽 -->
                  <template v-slot:card>
                    <div style="padding-left: 20px">
                      <h1>{{ item.title }}</h1>
                      <dv-digital-flop
                        :config="item.num"
                        style="width: 100px; height: 50px"
                      />
                      <p>{{ item.titleMax }}</p>
                    </div>
                  </template>
                </Line>
              </div>
              <div class="box_dish_left_center">
                <Line :height="heightSonCenter" :width="widthSonCenter1">
                  <template v-slot:columnar>
                    <div style="height: 100%" class="flexCenter">
                      <!-- 柱状图 -->
                      <EchartEchart
                        id="chartColumnar"
                        class="chartColumnar"
                        height="98%"
                        :full-options="echartsOptions"
                        :loading="loading"
                      ></EchartEchart>
                    </div>
                  </template>
                </Line>
                <Line :height="heightSonCenter" :width="widthSonCenter2">
                  <template v-slot:Capsule>
                    <div style="height: 100%" class="flexCenter">
                      <dv-capsule-chart
                        :config="Capsule"
                        style="width: 100%; height: 100%"
                      />
                    </div>
                  </template>
                </Line>
              </div>
              <div class="box_dish_left_bottom">
                <Line :height="heightSonCenter" :width="widthSonCenter1">
                  <template v-slot:line>
                    <div style="height: 100%" class="flexCenter">
                      <!-- 折线图 -->
                      <EchartEchart
                        id="chartLine"
                        class="chartColumnar2"
                        height="98%"
                        :full-options="echartsOptionsLine"
                        :loading="loading"
                      ></EchartEchart>
                    </div>
                  </template>
                </Line>
                <Line :height="heightSonCenter" :width="widthSonCenter2">
                  <template v-slot:chart>
                    <div style="height: 100%" class="flexCenter">
                      <dv-conical-column-chart
                        :config="configchart"
                        style="width: 100%; height: 95%"
                      />
                    </div>
                  </template>
                </Line>
              </div>
            </div>
            <div class="box_dish_right">
              <Line :height="heightSonBottom" :width="widthSonBottom">
                <template v-slot:line>
                  <div style="height: 100%" class="flexCenter">
                    <!-- 饼图 -->
                    <EchartEchart
                      id="chartCake"
                      class="chartCake"
                      height="98%"
                      :full-options="echartsOptionsCake"
                      :loading="loading"
                    ></EchartEchart>
                  </div>
                </template>
              </Line>
              <Line :height="heightSonBottom" :width="widthSonBottom">
                <template v-slot:configboard>
                  <div style="height: 100%" class="flexCenter">
                    <!-- 轮播表 -->
                    <dv-scroll-board
                      :config="configboard"
                      style="width: 100%; height: 99%"
                    />
                  </div>
                </template>
              </Line>
            </div>
          </div>
        </div>
      </dv-border-box-10>
    </div>
  </div>
</template>
  
<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import Header from "./components/header.vue";
import Line from "./components/line.vue";
import EchartEchart from "./utils/echart.vue";

import { useIndex } from "@/utils/useDraw.js"; //组件  大屏自适应
const isShowLoading = ref(true);
setTimeout(function () {
  isShowLoading.value = false;
}, 1000);
// 卡片数据

const cardData = reactive([
  {
    title: "标题1",
    num: { number: [0], content: "{nt}个" },
    titleMax: "小标题1",
  },
  {
    title: "标题2",
    num: { number: [0], content: "{nt}个" },
    titleMax: "小标题2",
  },
  {
    title: "标题3",
    num: { number: [0], content: "{nt}个" },
    titleMax: "小标题3",
  },
  {
    title: "标题4",
    num: { number: [0], content: "{nt}个" },
    titleMax: "小标题4",
  },
]);
// 柱状图
const loading = ref(true); // 初始值可以根据实际情况设定

setTimeout(function () {
  loading.value = false;
}, 2000);

const echartsOptions = reactive({
  options: {},
  init: false,
});
// 折线图
let echartsOptionsLine = reactive({
  options: {},
  init: false,
});
// 胶囊柱图
const Capsule = reactive({
  data: [
    {
      name: "南阳",
      value: 167,
    },
    {
      name: "周口",
      value: 67,
    },
    {
      name: "漯河",
      value: 123,
    },
    {
      name: "郑州",
      value: 55,
    },
    {
      name: "西峡",
      value: 98,
    },
  ],
  colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],
  unit: "单位",
  showValue: true,
});
//锥形柱图

const configchart = reactive({
  data: [
    {
      name: "周口",
      value: 55,
    },
    {
      name: "南阳",
      value: 120,
    },
    {
      name: "西峡",
      value: 71,
    },
    {
      name: "驻马店",
      value: 66,
    },
    {
      name: "新乡",
      value: 80,
    },
    {
      name: "信阳",
      value: 35,
    },
    {
      name: "漯河",
      value: 15,
    },
  ],
  img: [
    // vue3中图片引入方法
    new URL("./images/face1.png", import.meta.url).href,
    new URL("./images/face2.png", import.meta.url).href,
    new URL("./images/face3.png", import.meta.url).href,
    new URL("./images/face1.png", import.meta.url).href,
    new URL("./images/face2.png", import.meta.url).href,
    new URL("./images/face3.png", import.meta.url).href,
    new URL("./images/face1.png", import.meta.url).href,
  ],
});
// 饼图
const echartsOptionsCake = reactive({
  options: {},
  init: false,
});

const configboard = reactive({
  header: ["列1", "列2", "列3"],
  data: [
    ['<span style="color:#37a2da;">行1列1</span>', "行1列2", "行1列3"],
    ["行2列1", '<span style="color:#32c5e9;">行2列2</span>', "行2列3"],
    ["行3列1", "行3列2", '<span style="color:#67e0e3;">行3列3</span>'],
    ["行4列1", '<span style="color:#9fe6b8;">行4列2</span>', "行4列3"],
    ['<span style="color:#ffdb5c;">行5列1</span>', "行5列2", "行5列3"],
    ["行6列1", '<span style="color:#ff9f7f;">行6列2</span>', "行6列3"],
    ["行7列1", "行7列2", '<span style="color:#fb7293;">行7列3</span>'],
    ["行8列1", '<span style="color:#e062ae;">行8列2</span>', "行8列3"],
    ['<span style="color:#e690d1;">行9列1</span>', "行9列2", "行9列3"],
    ["行10列1", '<span style="color:#e7bcf3;">行10列2</span>', "行10列3"],
  ],
  index: true,
  columnWidth: [50],
  align: ["center"],
});

const boxRef = ref();
const heightSon = ref("100%");
const widthSon = ref("22%");
// 中间
const heightSonCenter = ref("100");
const widthSonCenter1 = ref("60%");

const widthSonCenter2 = ref("35%");

// 底部
const widthSonBottom = ref("100%");
const heightSonBottom = ref("46%");

// 生命周期
onMounted(() => {
  const { appRef, calcRate, windowDraw } = useIndex(boxRef.value);
  windowDraw();
  calcRate();

  cardData.forEach((item) => {
    item.num.number[0] = 333;
    console.log(item.num.number, "item");
  });

  // _________________________________________________柱状图标题

  //指定图表的配置项和数据
  var dataAxis = [
    "1日",
    "2日",
    "3日",
    "4日",
    "5日",
    "6日",
    "7日",
    "8日",
    "9日",
    "10日",
    "11日",
    "12日",
    "13日",
    "14日",
    "15日",
  ];
  var data = [
    220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200,
  ];
  var yMax = 500;
  var dataShadow = [];

  for (var i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
  }

  echartsOptions.options = {
    title: {
      text: "柱状图标题",
      left: "center", // 可以是 'left', 'center', 'right', 'xx%', 或者具体像素值
      top: 2, // 可以是 'top', 'middle', 'bottom', 'xx%', 或者具体像素值
      textStyle: {
        color: "#FF0000", // 标题颜色，这里设置为红色
      },
    },
    grid: {
      x: 40,
      y: 40,
      x2: 20,
      y2: 20,
    },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        /*inside: true,*/
        interval: 0,
        color: "#fff",
        fontSize: 12,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: 12,
        lineStyle: {
          color: "#fff",
        },
      },
      z: 10,
    },
    yAxis: {
      type: "value",
      name: "单位：元",
      axisLine: {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: 12,
        lineStyle: {
          color: "#fff",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
    },

    dataZoom: [
      {
        type: "inside",
      },
    ],
    series: [
      {
        // For shadow
        type: "bar",
        itemStyle: {
          color: "rgba(0,0,0,0.05)",
        },
        barGap: "-100%",
        barCategoryGap: "40%",
        data: dataShadow,
        animation: false,
      },
      {
        type: "bar",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#0efdff" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
        emphasis: {
          // itemStyle: {
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //     { offset: 0, color: "#2378f7" },
          //     { offset: 0.7, color: "#2378f7" },
          //     { offset: 1, color: "#0efdff" },
          //   ]),
          // },
        },
        data: data,
      },
    ],
  };

  // _________________________________________________折线图标题

  echartsOptionsLine.options = {
    title: {
      text: "折线图",
      textStyle: {
        color: "#FF0000", // 标题颜色，这里设置为红色
      },
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      right: "10%",
      data: ["折线一", "折线二"],
    },
    grid: {
      x: 40,
      y: 40,
      x2: 20,
      y2: 20,
    },
    toolbox: {
      feature: {
        //saveAsImage: {}
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        /*inside: true,*/
        interval: 0,
        color: "#fff",
        fontSize: 12,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: 12,
        lineStyle: {
          color: "#fff",
        },
      },
      data: ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00"],
    },
    yAxis: {
      type: "value",

      axisLine: {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: 12,
        lineStyle: {
          color: "#fff",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
    },
    series: [
      {
        name: "折线一",
        type: "line",
        stack: "总量",
        data: [280, 102, 191, 134, 390, 230, 210],
        itemStyle: {
          color: "#0efdff", //折线点的颜色
          lineStyle: {
            color: "#0efdff", //折线的颜色
            width: 2,
          },
        },
      },
      {
        name: "折线二",
        type: "line",
        stack: "总量",
        data: [100, 132, 131, 234, 290, 330, 110],
        itemStyle: {
          color: "#00ff00", // 绿色
        },
        lineStyle: {
          color: "#00ff00", // 绿色
        },
      },
    ],
  };

  // _________________________________________________饼图

  echartsOptionsCake.options = {
    title: {
      text: "数据情况统计",
      subtext: "",
      left: "right",
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      // orient: 'vertical',
      // top: 'middle',
      type: "scroll",
      orient: "vertical",
      right: 10,
      top: 40,
      bottom: 20,
      left: "right",
      data: ["西凉", "益州", "兖州", "荆州", "幽州"],
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    grid: {
      x: "-10%",
      y: 40,
      x2: 20,
      y2: 20,
    },
    color: ["#09d0fb", "#f88cfb", "#95f8fe", "#f9f390", "#ecfeb7"],
    series: [
      {
        type: "pie",
        radius: "65%",
        center: ["50%", "50%"],
        selectedMode: "single",
        data: [
          { value: 1548, name: "幽州" },
          { value: 535, name: "荆州" },
          { value: 510, name: "兖州" },
          { value: 634, name: "益州" },
          { value: 735, name: "西凉" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
});
onUnmounted(() => {
  const { unWindowDraw } = useIndex(boxRef.value);
  unWindowDraw();
});
</script>
  <style lang="scss" scoped>
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  background-color: #282c34;

  .layout-container {
    width: 100%;
    height: 100%;

    .box_dish {
      $common-pd: 90px;
      height: calc(100% - #{$common-pd * 2});
      display: flex;
      .box_dish_left {
        margin: 0 30px 0 30px;
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .box_dish_left_top {
          height: 20%;
          display: flex;
          justify-content: space-between;
        }
        .box_dish_left_center {
          height: 35%;
          display: flex;
          justify-content: space-between;
        }
        .box_dish_left_bottom {
          height: 35%;
          display: flex;
          justify-content: space-between;
        }
      }
      .box_dish_right {
        width: 30%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        margin-right: 30px;
      }
    }
  }
}
</style>